/*
 * Element UI 样式覆盖
 * 该文件用于覆盖Element UI默认样式，统一应用主题变量
 * 所有CSS变量均引用themes.ts中定义的语义化变量，以支持主题切换
 */
/* 引入变量定义 */

/* 全局CSS变量定义 - 用于覆盖Element UI默认变量 */
:root {
  --section-gap: 160px; /* 页面区块间距 */
}

/* 自定义全局样式 */

/* 菜单组件样式覆盖 */
.el-menu {
  /* 菜单背景色 - 引用主题中的菜单背景色 */
  --el-menu-bg-color: var(--colors-menu-background);
  /* 菜单激活文本色 - 引用主题中的主色调激活色 */
  --el-menu-active-color: var(--colors-primary-active);
  box-shadow: 0 2px 12px 2px var(--colors-secondary-shadow);
  border-radius: 12px;
  padding: 4px 0;
  border: none;
}

/* 子菜单组件样式覆盖 */
.el-sub-menu .el-menu {
  box-shadow: 0 0px 12px 1px var(--colors-secondary-shadow);
  background: var(--colors-sub-menu-background);
}

/* 菜单项和子菜单标题样式 */
.el-menu-item,
.el-sub-menu__title {
  border-radius: 8px;
  margin: 2px 0;
  transition:
    background 0.2s,
    color 0.2s;
  font-size: 15px;
  color: var(--colors-primary-text);
  font-weight: 500;
}

.el-menu-item.is-active,
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: var(--colors-menu-active-background) !important;
  color: var(--colors-primary-text);
  box-shadow: 0 2px 8px 0 rgba(59, 130, 246, 0.08);
  border-radius: 10px;
  position: relative;
  z-index: 1;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.el-menu-item.is-active::before,
.el-menu-item:hover::before,
.el-sub-menu__title:hover::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, var(--colors-primary-active) 0%, var(--colors-primary) 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--colors-secondary-shadow);
  z-index: 2;
}

/* 提示框样式覆盖 */
.el-popper {
  --el-popper-bg-color: var(--colors-dropdown-background);
  --el-popper-border-color: transparent;
  --el-popper-shadow: 0 4px 16px 0 var(--colors-secondary-shadow), 0 1px 3px 0 var(--colors-secondary-shadow);
  --el-bg-color-overlay: var(--colors-overlay-background);
  --el-fill-color-light: var(--colors-button-active-background);
  border: 1px solid var(--el-popper-border-color) !important;
  box-shadow: var(--el-popper-shadow);
  padding: 0 !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

/* 下拉菜单组件样式覆盖 */
.el-dropdown {
  /* 下拉菜单背景色 - 引用主题中的下拉菜单背景色 */
  --el-dropdown-bg-color: var(--colors-dropdown-background);
  --el-dropdown-border-color: var(--colors-border-color);
  --el-dropdown-shadow: 0 8px 32px 0 var(--colors-secondary-shadow), 0 1.5px 6px 0 var(--colors-secondary-shadow);
  --el-dropdown-text-color: var(--colors-primary-text);
  --el-dropdown-hover-bg-color: var(--colors-dropdown-hover-background);
  --el-dropdown-active-text-color: var(--colors-primary);
  --el-text-color-regular: var(--colors-white-soft);
  position: relative;
  display: inline-block;
}

/* 下拉菜单触发器样式 */
.el-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-dropdown__trigger:hover {
  background-color: var(--colors-dropdown-hover-background);
}

.el-dropdown__popper.el-popper {
  box-shadow: var(--el-popper-shadow);
}

/* 弹出菜单样式覆盖 */
.el-menu--popup {
  --el-menu-bg-color: var(--colors-dropdown-background);
  --el-menu-border-color: var(--colors-border-color);
  --el-menu-shadow: 0 8px 32px 0 var(--colors-secondary-shadow), 0 1.5px 6px 0 var(--colors-secondary-shadow);
  background: var(--el-menu-bg-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--el-menu-shadow) !important;
  border: 1px solid var(--el-menu-border-color) !important;
  box-sizing: border-box !important;
  padding: 6px 0 !important;
  min-width: 160px;
  margin-top: 4px !important;
}

.el-menu--popup::after {
  display: none !important;
}

.el-dropdown-menu {
  background-color: var(--colors-dropdown-background);
  border-radius: 12px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
}

.el-dropdown-item {
  display: block;
  padding: 8px 16px;
  clear: both;
  font-weight: normal;
  color: var(--el-dropdown-text-color);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 2px 8px;
}

.el-dropdown-item:hover {
  background-color: var(--el-dropdown-hover-bg-color);
  color: var(--el-dropdown-active-text-color);
}

.el-dropdown-item.is-disabled {
  color: var(--colors-secondary-text);
  cursor: not-allowed;
}

.el-dropdown-item.is-disabled:hover {
  background-color: transparent;
  color: var(--colors-secondary-text);
}

.el-menu--popup .el-menu-item {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition:
    background 0.2s,
    color 0.2s;
  -webkit-transition:;
  -moz-transition:;
  -ms-transition:;
  -o-transition:;
}

/* 表格组件样式覆盖 */
.el-table {
  /* 表格背景色 - 引用主题中的表格背景色 */
  --el-table-bg-color: var(--colors-table-background);
  /* 表格文本色 - 引用主题中的主要文本色 */
  --el-table-text-color: var(--colors-primary-text);
  /* 表格头部背景色 - 引用主题中的表格头部背景色 */
  --el-table-header-bg-color: var(--colors-table-header-background);
  --el-table-header-text-color: var(--colors-primary-text);
  --el-table-border-color: var(--colors-border-color);
  /* 表格行悬停背景色 - 引用主题中的表格行悬停背景色 */
  --el-table-row-hover-bg-color: var(--colors-table-row-hover-background);
  --el-table-row-current-bg-color: var(--colors-primary-hover);
  --el-table-tr-bg-color: var(--colors-table-row-background);
}

/* 卡片组件样式覆盖 */
.el-card {
  /* 卡片背景色 - 引用主题中的卡片背景色 */
  --el-card-bg-color: var(--colors-card-background) !important;
  --el-card-border-color: var(--colors-border-color);
  /* 卡片头部背景色 - 引用主题中的卡片头部背景色 */
  --el-card-header-bg-color: var(--colors-card-header-background);
  --el-card-header-text-color: var(--colors-primary-text);
  --el-card-shadow: 0 4px 16px 0 var(--colors-secondary-shadow), 0 1px 3px 0 var(--colors-secondary-shadow);
  border-radius: 12px !important;
  overflow: hidden !important;
}

.el-card__header {
  padding: 16px 20px !important;
}

.el-card__header span {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.el-card__body {
  padding: 20px !important;
}

/* 输入框和文本域样式覆盖 */
.el-input,
.el-textarea {
  /* 输入框背景色 - 引用主题中的输入框背景色 */
  --el-input-bg-color: var(--colors-input-background);
  --el-input-border-color: var(--colors-border-color);
  --el-input-text-color: var(--colors-primary-text);
  --el-input-placeholder-color: var(--colors-secondary-text);
  --el-input-focus-border-color: var(--colors-primary);
  --el-input-focus-shadow: 0 0 6px 1px var(--colors-primary-shadow);
  --el-input-hover-shadow: 0 0 4px 1px var(--colors-primary-shadow);
  --el-input-hover-border-color: var(--colors-divider);
  padding: 2px 0;
}

.el-input:hover {
  border-color: var(--el-input-hover-border-color);
}

.el-input__wrapper {
  border-radius: 8px !important;
  padding: 2px 7px !important;
}

.el-input__wrapper:hover {
  box-shadow: var(--el-input-hover-shadow) !important;
}

.el-input__wrapper.is-focus {
  box-shadow: var(--el-input-focus-shadow) !important;
}

.el-input__inner {
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: all 0.3s ease !important;
}

.el-textarea {
  --el-textarea-input-hover-shadow: 0 0 4px 1px var(--colors-primary-shadow);
}

.el-textarea__inner:hover {
  box-shadow: var(--el-textarea-input-hover-shadow) !important;
}

/* 按钮组件样式覆盖 */
.el-button {
  /* 按钮文本色 - 引用主题中的主要文本色 */
  --el-button-text-color: var(--colors-primary-text);
  /* 按钮背景色 - 引用主题中的按钮背景色 */
  --el-button-bg-color: var(--colors-button-bg-color);
  --el-button-border-color: var(--colors-border-color);
  --el-button-hover-text-color: var(--colors-primary-text);
  /* 按钮悬停背景色 - 引用主题中的按钮悬停背景色 */
  --el-button-hover-bg-color: var(--colors-button-hover-background);
  --el-button-hover-border-color: var(--colors-divider);
  --el-button-active-text-color: var(--colors-primary-text);
  /* 按钮激活背景色 - 引用主题中的按钮激活背景色 */
  --el-button-active-bg-color: var(--colors-button-active-background);
  --el-button-active-border-color: var(--colors-border-color);
  --el-button-hover-shadow: 0 0 2px 1px var(--colors-button-hover-shadow-color);
  transition: all 0.3s ease !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.el-button:hover {
  box-shadow: var(--el-button-hover-shadow);
}

/* 主要按钮样式覆盖 */
.el-button--primary {
  /* 按钮文本色 - 引用主题中的按钮文本色 */
  --el-button-text-color: var(--colors-button-text-color);
  --el-button-bg-color: var(--colors-primary);
  --el-button-border-color: var(--colors-primary-border);
  --el-button-hover-text-color: var(--colors-button-text-color);
  --el-button-hover-bg-color: var(--colors-primary-hover);
  --el-button-hover-border-color: var(--colors-primary-hover-border);
  --el-button-active-bg-color: var(--colors-primary-active);
  --el-button-active-border-color: var(--colors-primary-active-border);
}

/* 成功按钮样式覆盖 */
.el-button--success {
  --el-button-text-color: var(--colors-button-text-color);
  --el-button-bg-color: var(--colors-success);
  --el-button-border-color: var(--colors-success-border);
  --el-button-hover-text-color: var(--colors-button-text-color);
  --el-button-hover-bg-color: var(--colors-success-hover);
  --el-button-hover-border-color: var(--colors-success-hover-border);
  --el-button-active-bg-color: var(--colors-success-active);
  --el-button-active-border-color: var(--colors-success-active-border);
}

/* 警告按钮样式覆盖 */
.el-button--warning {
  --el-button-text-color: var(--colors-button-text-color);
  --el-button-bg-color: var(--colors-warning);
  --el-button-border-color: var(--colors-warning-border);
  --el-button-hover-text-color: var(--colors-button-text-color);
  --el-button-hover-bg-color: var(--colors-warning-hover);
  --el-button-hover-border-color: var(--colors-warning-hover-border);
  --el-button-active-bg-color: var(--colors-warning-active);
  --el-button-active-border-color: var(--colors-warning-active-border);
}

/* 危险按钮样式覆盖 */
.el-button--danger {
  --el-button-text-color: var(--colors-button-text-color);
  --el-button-bg-color: var(--colors-danger);
  --el-button-border-color: var(--colors-danger-border);
  --el-button-hover-text-color: var(--colors-button-text-color);
  --el-button-hover-bg-color: var(--colors-danger-hover);
  --el-button-hover-border-color: var(--colors-danger-hover-border);
  --el-button-active-bg-color: var(--colors-danger-active);
  --el-button-active-border-color: var(--colors-danger-active-border);
}

/* 选择器组件样式覆盖 */
.el-select {
  /* 选择器输入框背景色 - 引用主题中的输入框背景色 */
  --el-select-input-bg-color: var(--colors-input-background);
  --el-select-input-border-color: var(--colors-border-color);
  --el-select-input-focus-border-color: var(--colors-primary);
  --el-select-input-focus-shadow: 0 0 8px 2px var(--colors-primary-shadow);
  --el-select-input-hover-shadow: 0 0 4px 1px var(--colors-primary-shadow);
  /* 下拉菜单背景色 - 引用主题中的下拉菜单背景色 */
  --el-select-dropdown-bg-color: var(--colors-dropdown-background);
  --el-select-dropdown-border-color: var(--colors-border-color);
  --el-select-dropdown-text-color: var(--colors-primary-text);
  /* 下拉菜单项悬停背景色 - 引用主题中的下拉项悬停背景色 */
  --el-select-dropdown-hover-bg-color: var(--colors-dropdown-hover-background);
  --el-select-dropdown-selected-text-color: var(--colors-primary);
  --el-fill-color-blank: var(--colors-fill-color-blank);
  padding: 2px;
}

.el-select__wrapper {
  box-shadow: 0 0 3px 1px var(--el-select-input-border-color) !important;
}

.el-select__wrapper.is-hovering {
  box-shadow: var(--el-select-input-hover-shadow) !important;
}

.el-select-dropdown {
  --el-border-radius-base: 8px;
  box-shadow:
    0 4px 16px 2px var(--colors-secondary-shadow),
    0 1px 3px 2px var(--colors-secondary-shadow) !important;
  padding: 6px 0 !important;
}

/* 日期选择器样式覆盖 */
.el-date-picker {
  /* 日期选择器背景色 - 引用主题中的下拉菜单背景色 */
  --el-date-picker-bg-color: var(--colors-dropdown-background);
  --el-date-picker-border-color: var(--colors-border-color);
  --el-date-picker-text-color: var(--colors-primary-text);
  --el-date-picker-header-bg-color: var(--colors-card-header-background);
  --el-date-picker-header-text-color: var(--colors-primary-text);
  /* 日期单元格悬停背景色 - 引用主题中的日期单元格悬停背景色 */
  --el-date-picker-cell-hover-bg-color: var(--colors-date-cell-hover-background);
  --el-date-picker-cell-selected-bg-color: var(--colors-primary-hover);
  --el-date-picker-cell-selected-text-color: var(--colors-primary);
  --el-date-picker-today-bg-color: var(--colors-primary-hover);
  --el-date-picker-today-text-color: var(--colors-primary);
  border-radius: 8px !important;
  box-shadow:
    0 4px 16px 0 var(--colors-secondary-shadow),
    0 1px 3px 0 var(--colors-secondary-shadow) !important;
}

.el-date-picker__header {
  padding: 12px 16px !important;
}

.el-date-picker__body {
  padding: 12px !important;
}

.el-date-table th {
  font-weight: 500 !important;
  padding: 8px 0 !important;
}

.el-date-table td {
  padding: 4px !important;
}

.el-date-table .el-date-table__cell {
  border-radius: 6px !important;
  height: 36px !important;
  line-height: 36px !important;
  width: 36px !important;
}

/* 单选框样式覆盖 */
.el-radio {
  --el-radio-text-color: var(--colors-primary-text);
  --el-radio-border-color: var(--colors-border-color);
  --el-radio-checked-border-color: var(--colors-primary);
  /* 单选框选中背景色 - 引用主题中的单选框选中背景色 */
  --el-radio-checked-bg-color: var(--colors-radio-checked-bg-color);
  --el-radio-checked-dot-color: var(--colors-primary);
}

/* 复选框样式覆盖 */
.el-checkbox {
  --el-checkbox-text-color: var(--colors-primary-text);
  --el-checkbox-border-color: var(--colors-border-color);
  --el-checkbox-checked-border-color: var(--colors-primary);
  --el-checkbox-checked-bg-color: var(--colors-primary);
  --el-checkbox-indeterminate-color: var(--colors-primary);
}

/* 开关样式覆盖 */
.el-switch {
  --el-switch-on-color: var(--colors-primary);
  --el-switch-off-color: var(--colors-switch-off-color);
  /* 开关开启文本色 - 引用主题中的开关开启文本色 */
  --el-switch-on-text-color: var(--colors-switch-on-text-color);
  --el-switch-off-text-color: var(--colors-secondary-text);
  --el-switch-disabled-on-color: var(--colors-border-color);
  --el-switch-disabled-off-color: var(--colors-border-color);
  --el-switch-disabled-text-color: var(--colors-secondary-text);
}

.el-switch__core {
  border: none !important;
  transition: background-color 0.3s ease !important;
}

/* 开关滑块样式 */
.el-switch__core::after {
  border-radius: 50% !important;
  height: 28px !important;
  width: 28px !important;
  top: 2px !important;
  left: 2px !important;
  background-color: var(--colors-switch-thumb-bg-color) !important;
  transition: transform 0.3s ease !important;
}

.el-switch__label {
  font-size: 14px !important;
}

/* 对话框样式覆盖 */
.el-dialog {
  /* 对话框背景色 - 引用主题中的卡片背景色 */
  --el-dialog-bg-color: var(--colors-card-background);
  --el-dialog-border-color: var(--colors-border-color);
  --el-dialog-header-bg-color: var(--colors-card-header-background);
  --el-dialog-header-text-color: var(--colors-primary-text);
  /* 对话框内容背景色 - 引用主题中的对话框内容背景色 */
  --el-dialog-body-bg-color: var(--colors-dialog-body-bg-color);
  --el-dialog-body-text-color: var(--colors-primary-text);
  --el-dialog-footer-bg-color: var(--colors-card-header-background);
  --el-dialog-box-shadow: 0 8px 32px 0 var(--colors-secondary-shadow), 0 1.5px 6px 0 var(--colors-secondary-shadow);
  border-radius: 12px !important;
  overflow: hidden !important;
}

.el-dialog__header {
  padding: 16px !important;
}

.el-dialog__title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--el-dialog-header-text-color) !important;
}

.el-dialog__body {
  padding: 24px !important;
  color: var(--el-dialog-body-text-color) !important;
}

.el-dialog__footer {
  padding: 16px 24px !important;
}

/* 分页控件样式覆盖 */
.el-pagination {
  /* 分页控件背景色 - 引用主题中的分页背景色 */
  --el-pagination-bg-color: var(--colors-pagination-background);
  --el-pagination-text-color: var(--colors-primary-text);
  --el-pagination-disabled-text-color: var(--colors-secondary-text);
  --el-pagination-border-color: var(--colors-border-color);
  /* 分页控件悬停背景色 - 引用主题中的分页悬停背景色 */
  --el-pagination-hover-bg-color: var(--colors-pagination-hover-background);
  --el-pagination-active-bg-color: var(--colors-primary);
  /* 分页激活文本色 - 引用主题中的分页激活文本色 */
  --el-pagination-active-text-color: var(--colors-pagination-active-text-color);
  --el-pagination-input-bg-color: var(--colors-input-background);
  --el-pagination-input-border-color: var(--colors-border-color);
  --el-pagination-input-focus-border-color: var(--colors-primary);
}

.el-pagination__sizes {
  margin-right: 12px !important;
}

.el-pagination__total {
  margin-right: 12px !important;
}

.el-pager li {
  border-radius: 6px !important;
  margin: 0 4px !important;
  min-width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.el-pagination__jump {
  margin-left: 12px !important;
}
